<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="">
    <title>Block Hole</title>
    <style type="text/css">
        body {
            background-color: #eccc68;
        }

        canvas {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <script type="module">
        import {createCanvas, vector2, animation, mouse, curve, circle, line, fill, stroke} from './spring/board.js'
        import {Particle, Spring} from './spring/object.js'

        const c = 30, G = 6.67, M = 1000
        const width = 600, height = 600

        class Photon {
            constructor(x, y) {
                this.position = vector2(x, y)
                this.velocity = vector2(-c, 0)
                this.tail = []
                this.stop = false
            }

            update(dt=1) {
                this.tail.push(this.position.clone())
                if (this.tail.length > 250) {
                    this.tail.splice(0, 1)
                }
                if (!this.stop) {
                    this.position.add(this.velocity.clone().mul(dt))
                }
            }

            show() {
                circle(this.position.x, this.position.y, 2, 20)
                fill()
                curve(this.tail, stroke)
            }
        }

        let rs = (2 * G * M) / (c * c)
        let blockhole = vector2(width * .76, height/2)
        let particles = []
        let start = height/2, end = height/2 - rs * 2.6
        for (let i = 10; i < start; i += 3) {
            particles.push(new Photon(width * .9, i))
        }
        // particles = [new Photon(width * .6, end)]

        createCanvas(600, 400)
        function draw() {
            circle(blockhole.x, blockhole.y, rs, 20)
            fill('#000f')
            circle(blockhole.x, blockhole.y, rs * 2.6, 20)
            stroke('#cccc', 20)
            circle(blockhole.x, blockhole.y, rs * 1.6, 20)
            stroke('#c84c', 20)

            line(0, end, width * .9, end)
            stroke('#c84c')
            line(0, start, width * .9, start)
            stroke('#c84c')

            particles.forEach(particle => {
                let force = blockhole.clone().sub(particle.position)
                let fg = G * M / (force.length * force.length)
                if (force.length > rs){
                    particle.velocity.add(force.normalize().mul(fg))
                    // 最小速度c
                    // particle.velocity.limit(c)
                } else {
                    particle.stop = true
                }
                particle.update(.1)
                particle.show()
            })
        }
        animation(draw)
    </script>
</body>

</html>